<template>
	<view class="container">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" class="swiper-container"
				circular>
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image :src="item.src" mode="aspectFill" class="swiper-image" />
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view v-for="(section, index) in sections" :key="index" class="section"
				:class="{'section-active': activeSection === index + 1}" @click="handleSectionClick(section.route)">
				<view class="section-left">
					<image :src="section.icon" mode="aspectFill" class="section-icon" />
				</view>
				<view class="section-right">
					<view class="section-header">
						<view class="section-title">{{ section.title }}</view>
					</view>
					<view class="section-list">
						<view v-for="(item, itemIndex) in section.items" :key="itemIndex" class="list-item">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const activeSection = ref(0);

	// 轮播图数据
	const banners = ref([{
			src: '/static/images/knowledge1.png'
		},
		{
			src: '/static/images/knowledge2.png'
		},
		{
			src: '/static/images/knowledge3.jpg'
		}
	]);

	// 卡片数据
	const sections = ref([{
			title: '垃圾分类',
			icon: '/static/images/knowledge1.png',
			items: [
				'1. 可回收物',
				'4. 大件垃圾',
				'2. 有害垃圾',
				'5. 其他垃圾(干垃圾)',
				'3. 厨余垃圾(湿垃圾)'
			],
			route: '/pages/knowledge/components/waste-sorting' // 路由路径
		},
		{
			title: '节能减排',
			icon: '/static/images/knowledge3.jpg',
			items: [
				'1. 节能技术',
				'3. 减少碳排放',
				'2. 可再生能源',
				'4. 绿色建筑',
				'5. 智能能源管理'
			],
			route: '/pages/knowledge/components/energy-conservation' // 路由路径
		},
		{
			title: '生态保护',
			icon: '/static/images/knowledge2.png',
			items: [
				'1. 生物多样性保护',
				'3. 湿地保护',
				'2. 森林保护',
				'4. 海洋保护',
				'5. 草原保护',
				'6. 水资源保护'
			],
			route: '/pages/knowledge/components/ecological-protection' // 路由路径
		}
	]);

	// 点击 section 跳转到对应路由
	const handleSectionClick = (route) => {
		uni.navigateTo({
			url: route
		});
	};
</script>

<style scoped lang="scss">
	.container {
		background: linear-gradient(#C8E6C9, #fff);
		height: 100vh;

		.banner {
			margin-bottom: 20rpx;

			.swiper-container {
				height: 540rpx;

				.swiper-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.content {
			padding: 0 40rpx;

			.section {
				background-color: #C8E6C9;
				border-radius: 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				padding: 0;
				overflow: hidden;
				transition: all 0.3s;

				&.section-active {
					transform: translateY(-2rpx);
					background-color: #A5D6A7;
				}

				.section-left {
					width: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx;
				}

				.section-right {
					flex: 1;
					padding: 20rpx;
				}

				.section-header {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.section-icon {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
					object-fit: cover;
				}

				.section-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.section-list {
					display: flex;
					flex-wrap: wrap;

					.list-item {
						flex: 0 0 50%;
						font-size: 28rpx;
						margin-bottom: 10rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>